<template>
 <view class="status_bar" :style="styleObject">
    <view class="top_view" :style="styleObject"></view> 
 </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
export default {
  name: 'UniStatusBar',
  data () {
    return {
      statusBarHeight: statusBarHeight,
			styleObject: {
				background: this.bgColor
			}
    }
  },
	props: {
		bgColor: {
			type: String,
			default: ''
		}
	}
}
</script>

<style lang="scss">
.status_bar {
    height: var(--status-bar-height); 
    width: 100%; 
    background: #d93728;
	color: #000000;
} 
.top_view { 
    height: var(--status-bar-height); 
    width: 100%; 
    position: fixed; 
    background: #FFFFFF;
    top: 0; 
    z-index: 999; 
}
</style>
